import { defineStore } from 'pinia';
import { themeConfig } from '@/config/theme';
import { setting } from '@/config/setting';
import { getLanguage, setLanguage, setSettings, getSettings } from '@/utils/cookies';

const {
  mode,
  theme,
  fixedHead,
  fullScreen,
  refresh,
  collapse,
  notice,
  isBreadcrumb,
  isLogo,
  tag,
} = themeConfig;

const { lang } = setting;

export const useSettingStore = defineStore('setting', {
  state: () => ({
    routerView: true, // 是否显示路由
    isDrawerSetting: false, // 是否打开主题设置
    isMobile: false, // 是否为移动端
    isDrawer: false, // 是否展开移动端菜单
    isFullScreen: false, // 是否显示全屏
    collapse,
    fullScreen,
    refresh,
    mode: getSettings() ? getSettings().mode : mode,
    theme,
    fixedHead,
    notice,
    isBreadcrumb,
    isLogo,
    tag,
    lang: lang,
  }),
  actions: {
    /**
     * @description 切换展开收起
     */
    changeCollapse() {
      this.collapse = !this.collapse;
    },

    /**
     * @description 切换是否全屏
     * @param {boolean} flag true|false
     */
    changeFullScreen(flag) {
      this.isFullScreen = flag;
    },

    /**
     * @description 是否刷新路由
     * @param {boolean} flag true|false
     */
    setRouterView(flag) {
      this.routerView = flag;
    },

    /**
     * @description 是否为移动端
     * @param {boolean} flag true|false
     */
    changeMobile(flag) {
      this.isMobile = flag;
    },

    /**
     * @description 是否展开移动端菜单
     * @param {boolean} flag true|false
     */
    changeDrawer(flag) {
      this.isDrawer = flag;
    },

    /**
     * @description 设置主题
     * @param {string} theme 系统默认：blue|green|red|default
     */
    setTheme(theme) {
      this.theme = theme;
    },

    /**
     * @description 是否打开主题设置
     * @param {boolean} flag true|false
     */
    setSettingDrawer(flag) {
      this.isDrawerSetting = flag;
    },

    /**
     * @description 是否显示面包导航
     * @param {boolean} flag true|false
     */
    setBreadcrumb(flag) {
      this.isBreadcrumb = flag;
    },

    /**
     * @description 是否显示标签
     * @param {boolean} flag true|false
     */
    setTag(flag) {
      this.tag = flag;
    },

    /**
     * @description 切换布局
     * @param {string} mode 可选值：vertical|horizontal
     */
    setMode(mode) {
      this.mode = mode;
    },

    /**
     * @description 切换语言
     * @param {string} lang 语言 可选值：zh-cn|en
     */
    changeLanguage(lang) {
      setLanguage(lang);
      this.lang = lang;
    },

    /**
     * @description 设置主题配置信息
     * @param {object} options 配置项
     */
    setSettingOptions(options) {
      setSettings(options.value);
      Object.assign(this, { ...options.value });
    },
  },
});